<template>
  <view class="imgCate">
    <u-subsection
      :list="list"
      :current="curNow"
      active-color="#FF69B4"
      mode="subsection"
      @change="changeIndex"
    ></u-subsection>
    <scroll-view
      class="content"
      scroll-y
      enable-flex
      @scrolltolower="toBottom"
      scroll-right
    >
      <view class="cataimg_item" v-for="item in cateList" :key="item.id">
        <image :src="item.thumb" mode="widthFix"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      list: [
        {
          name: "最新",
          order: "new",
        },
        {
          name: "热门",
          order: "hot",
        },
      ],
      curNow: 0,
      id: "",
      params: {
        limit: 30,
        skip: 0,
        order: "new",
      },
      cateList: [],
      getMore: true,
    };
  },
  methods: {
    changeIndex(i) {
      if (this.curNow !== i) {
        this.curNow = i;
      }
      this.params.order = this.list[i].order;
      this.params.skip = 0;
      this.cateList = [];
      this.getMore = true;
      this.getList();
    },
    async getList() {
      const { data } = await this.$request({
        url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
        data: this.params,
      });
      if (data.res.vertical.length == 0) {
        this.getMore = false;
        uni.showToast({
          title: "全部加载完毕",
          icon: "none",
        });
        return;
      }
      this.cateList = [...this.cateList, ...data.res.vertical];
      //console.log(this.cateList);
    },
    toBottom() {
      if (this.getMore) {
        this.params.skip += this.params.limit;

        this.getList();
      } else {
        uni.showToast({
          title: "全部加载完毕",
          icon: "none",
        });
      }
    },
  },
  onLoad(e) {
    this.id = e.id;
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.imgCate {
  u-subsection {
  }

  .content {
    height: calc(100vh - 72rpx);
    display: flex;
    flex-wrap: wrap;
    .cataimg_item {
      flex: 33.33%;
      padding: 6rpx;
      image {
      }
    }
  }
}
</style>
